<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as PIXI from 'pixi.js'
import type { Rect } from '../01-Src/Rect';
import { gsap } from 'gsap'

defineProps<{ msg: string }>()

onMounted(async () => {
  console.log(`w:${window.innerWidth},h:${window.innerHeight}`)
  const app: PIXI.Application = new PIXI.Application();
  const winWidth = window.innerWidth;
  const winHegiht = window.innerHeight;
  await app.init({ width: window.innerWidth, height: window.innerHeight })
  console.log(`app init`);
  document.body.appendChild(app.canvas)
  console.log(`add canvas`);
  // const texture = await PIXI.Assets.load('../assets/vite.jpg');
  //public是直接放在发布目录中的,直接访问.
  const texture = await PIXI.Assets.load('./public/vite.jpg');

  // const texture = PIXI.Texture.from('../assets/vite.jpg') //创建一个纹理对象，然后加载纹理
  console.log(`add texture,${texture}`);
  const sprite = new PIXI.Sprite(texture) //创建一个精灵，并将纹理赋值给该精灵
  sprite.width = 100
  sprite.height = 100
  sprite.position.set(50, 50)  //设置精灵的宽高和位置
  app.stage.addChild(sprite)   //将精灵添加到舞台上显示
  app.ticker.add(() => {
    // 假设你想要每帧旋转1度，你需要将1度转换为弧度
    const rotationInRadians = PIXI.DEG_TO_RAD * 1;
    sprite.rotation += rotationInRadians;
  });

  const title = getText("F级冒险者战记", { x: winWidth / 2, y: winHegiht / 2 });
  title.visible = false;
  app.stage.addChild(title);

  const blueRow = getClolorBlock(0x0000FF, { x: -winWidth, y: winHegiht / 2, w: winWidth, h: 50 });
  app.stage.addChild(blueRow);

  const btn1 = getButton("移动", 100, 100, () => {
    blueRow.x = -winWidth;
    setTimeout(() => {
      gsap.to(blueRow, {
        x: 0,          // 目标位置
        duration: 1,    // 动画时长（秒）
        ease: "power2.out", // 缓动效果
        onComplete: () => {
          title.visible = true;
          setTimeout(() => { gsap.to(blueRow, { x: winWidth, duration: 1, ease: "power2.out" }) }, 200);
        }
      });
    }, 20)

  });
  const btn2 = getButton("测试2", 300, 100, () => {

  });
  app.stage.addChild(btn1, btn2);
});

function getClolorBlock(color: number, r: Rect): PIXI.Graphics {
  // 创建一个红色矩形色块
  const block = new PIXI.Graphics();
  block.beginFill(color); // 设置填充颜色（红色）
  block.drawRect(0, 0, r.w ?? 100, r.h ?? 100); // 绘制矩形 (x, y, width, height)
  block.endFill();

  // 设置位置
  block.x = r.x ?? 0;
  block.y = r.y ?? 0;

  return block;
}

function getText(text: string, r: Rect) {
  const style = new PIXI.TextStyle({
    fontFamily: 'Arial',    // 字体
    fontSize: 36,          // 字号
    fill: '#ffffff',       // 填充颜色
    stroke: '#ff3300',     // 描边颜色
    // strokeThickness: 5,    // 描边粗细
    dropShadow: true,      // 阴影
    // dropShadowColor: '#000000',
    // dropShadowBlur: 4,
    // dropShadowAngle: Math.PI / 6,
    // dropShadowDistance: 6,
    wordWrap: true,        // 自动换行
    wordWrapWidth: 440,    // 换行宽度
    lineHeight: 40         // 行高
  });
  // 1. 创建基础文本
  const basicText = new PIXI.Text(text,style);

  // basicText.colo
  // 2. 设置位置
  basicText.x = r.x ?? 0;
  basicText.y = r.y ?? 0;

  return basicText;
}

function getButton(text: string, x: number, y: number, clickHandler?: () => void): PIXI.Graphics {
  //添加一个测试按钮
  const button = new PIXI.Graphics()
    .beginFill(0x3498db)   // 蓝色背景
    .drawRoundedRect(0, 0, 200, 50, 10) // 圆角矩形
    .endFill();
  const buttonText = new PIXI.Text({
    text: text,
    style: {
      fontFamily: 'Arial',
      fontSize: 24,
      fill: 0xff1010,
      align: 'center',
    }
  });
  button.addChild(buttonText);
  button.interactive = true;
  // button.buttonMode = true;
  // 4. 添加事件
  button.on('pointerdown', () => {
    button.tint = 0xAAAAAA; // 点击时变暗
    console.log('按钮被点击');
    clickHandler?.();
  });

  button.on('pointerup', () => {
    button.tint = 0xFFFFFF; // 恢复颜色
  });

  button.position.set(x, y);
  return button;
}


</script>

<template>
  <div>111</div>

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
